<script lang="ts" setup>
import { injectState } from '../state';

defineOptions({ name: 'Filters' });

const {
  filter,
  page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
  console.log(data.value)
  filter.value = { ...toRaw(data.value) };
};

const reset = () => {
  data.value = { ...initial };
};
const options = [
  {
    value: '1',
    label: '每日安全承诺',
  },
  {
    value: '2',
    label: '年初承诺',
  },
  {
    value: '3',
    label: '年度履诺报告',
  }
]

const checkDate = computed({
	get() {
		const { createTimeStart, createTimeEnd } = data.value;
		const res: string[] = [];
		createTimeStart && res.push(dayjs(createTimeStart).format("YYYY-MM-DD HH:mm:ss"));
		createTimeEnd && res.push(dayjs(createTimeEnd).format("YYYY-MM-DD HH:mm:ss"));
		return res;
	},
	set(val) {
		data.value.createTimeStart = val?.[0];
		data.value.createTimeEnd = val?.[1];
	},
});
</script>

<template>
  <el-form class="filter-form" inline :model="data" :disabled="isLoading">
    <el-form-item label="承诺类别">
      <el-select
      v-model="data.type"
      placeholder="请选择"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"  v-model="checkDate" value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>
    <el-form-item>
      <el-input placeholder="搜索" class="w-240px!" v-model="data.commitDesc">
        <template #prefix>
          <el-icon class="i-custom:search" />
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-divider direction="vertical" h="32px!" m="r-22px!" />
      <el-button type="primary" :loading="isLoading" @click="search">
        <template #icon>
          <el-icon class="i-custom:search" />
        </template>
        查询
      </el-button>
      <el-button @click="reset">
        <template #icon>
          <el-icon class="i-custom:reset" />
        </template>
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>
